<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>新生报到系统</title>
<link rel="stylesheet" type="text/css"
	href="${path}/css/studentlogin.css" />
<script src="${path}/js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="bg_wrap">
		<div>
			<img src="${path}/images/login/1.jpg" width="100%" height="100%"
				alt="背景图" />
		</div>
		<div>
			<img src="${path}/images/login/2.jpg" width="100%" height="100%"
				alt="背景图" />
		</div>
		<div>
			<img src="${path}/images/login/3.jpg" width="100%" height="100%"
				alt="背景图" />
		</div>
	</div>
	<!--bg_wrap end-->
	<!--Login start-->
	<div id="Login">
		<h3 id="title" class="move">新生报到系统</h3>
		<form action="/student/tlogin" method="post">
			<!--添加target="_blank" 表示新界面打开  -->
			<!-- <form target="_blank"> -->
			<input type="text" placeholder="姓名" class="txt move" id="username"
				name="username" required="required" autocomplete="off"
				maxlength="10"> <input type="text" placeholder="学号"
				class="txt move" id="studentid" name="studentid"
				onkeyup="value=value.replace(/[^\d]/g,'')" title="纯数字输入"
				required="required" maxlength="12"> 
				<input type="submit"
				class="but move" value="报到" id="submit" />
		</form>
		<a id="title2" class="move" style="top: 380.4px; color: white">版权所有
			@BSXU xxxx</a> <a id="title3" class="move"
			style="top: 380.4px; color: white" href="/student/login2">已经报到过？</a>
	</div>
	<script>
		(function() {
			var timer = null;
			/*声明定时器*/
			/*最新的元素获取写法 兼容ie8*/
			/*一组元素*/
			var oImg = document.querySelectorAll('#bg_wrap div');
			var len = oImg.length; //3
			var index = 0;
			timer = setInterval(function() {
				oImg[index].style.opacity = 0;
				index++;//1 index=index+1;
				index %= len; // 求模取余 index=index%len;
				/*
				 0%3= 0 1%3=1	2%3=2 3%3=0整除了
				 */
				oImg[index].style.opacity = 1;
			}, 8888);
		})();
		// 表单重力模拟弹跳系统
		(function() {

			var oMove = document.querySelectorAll('.move');
			var len = oMove.length;
			var timer = null;
			var timeout = null; //setTimeout
			var speed = 3;

			move(len - 1);
			function move(index) {
				//根据下标来计算end值
				if (index < 0) {//如果下标<0 我们清除所有定时器
					clearInterval(timer); //清除循环定时器
					clearTimeout(timeout); //清除延时定时器
					return; //终止函数
				}
				var end = 150 + (index * 60);
				timer = setInterval(function() {
					//动量每回合自增3 模拟重力加速度
					speed += 3; // 4 7 11   -30 -27 -24 ... 30 -30
					//设置每一次的top值 他本身距离顶端的距离+ 动量
					var T = oMove[index].offsetTop + speed;

					//当元素的top大于设定值的时候
					if (T > end) {
						T = end;
						speed *= -1; // 让动量变为负数
						speed *= 0.4; // 摩擦系数 每一次都慢一点;
					}
					console.log(speed)
					oMove[index].style.top = T + 'px';
				}, 20);
				//过多少时间之后执行函数
				timeout = setTimeout(function() {
					clearInterval(timer);
					index--; // 3=>2
					move(index); // 递归自己调用自己
				}, 600);
			}

		})();

		if ("${type}" == "error") {
			alert("${msg }");
		}
		if ("${type}" == "success") {
			alert("${msg }");
			window.location.href = 'login2';
		}
	</script>
</body>
</html>
